<script setup>
import { reactive, ref, onMounted } from 'vue';
import { useCateStore,useBookmarkStore } from '@/store';
import { getBestFavicon } from '@/utils/favicon';
import { ElMessage } from 'element-plus';
const cateStore = useCateStore();
cateStore.onLoadCateList();

const bookmarkStore = useBookmarkStore();

const searchCate = ref('');

const form = reactive({
    id: '',
    title: '',
    url: '',
    icon: '',
    categoryId:  cateStore.cateList.length > 0 ? cateStore.cateList[0].id : ''
})


// 添加从当前页面快速添加书签的功能
const getCurrentPage = async () => {
    // 检查是否在Chrome扩展环境中
    if (typeof chrome !== 'undefined' && chrome.tabs && chrome.tabs.query) {
        chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => {
            if (tabs && tabs.length > 0) {
                const currentTab = tabs[0];
                form.title = currentTab.title || '';
                form.url = currentTab.url || '';
                form.icon = currentTab.favIconUrl || await getBestFavicon(currentTab.url) || '';
            }
        });
    } else {
        const url = window.location.href;
        const title = document.title;
        form.url = url;
        form.title = title;
        form.icon = await getBestFavicon(url) || '';
    }
};


onMounted(() => {
    getCurrentPage();
})


const onAddCate = () => {
    if (!searchCate.value) {
        ElMessage.error('请输入分类名称');
        return;
    }
    cateStore.createCate({
        name: searchCate.value
    })
}

const onAddBookmark  = () => {
    if (!form.categoryId ||  form.categoryId === '' || !form.title || !form.url || form.url ===  '') {
        ElMessage.error('请选择分类 OR 输入链接 ！');
        return;
    }
    try {
        bookmarkStore.createBookmark(form)
        ElMessage.success('添加成功！');
    } catch (error) {
        ElMessage.error('添加失败！');
    }
}

</script>
<template>
    <div class="mt-10">
        <el-form :model="form">
            <el-form-item label="">
                <el-input v-model="form.url" placeholder="链接" class="input-with-select">
                    <template #prepend>
                        <el-icon>
                            <Link />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="">
                <el-input v-model="form.title" placeholder="标题">
                    <template #prepend>
                        <!-- 加载完成后显示图标 -->
                        <img :src="form.icon" alt="网站图标" class="w-4 h-4" />
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item label="">
                <el-select v-model="form.categoryId" placeholder="选择分类" class="w-full">
                    <el-option v-for="item in cateStore.cateList" :key="item.id" :label="item.name" :value="item.id"  />
                    <template #prefix>
                        <el-icon>
                            <Menu />
                        </el-icon>
                    </template>
                    <template #header>
                        <div class="flex justify-between items-center gap-1">
                            <el-input v-model="searchCate" size="small" placeholder="搜索分类"class="rounded-button"></el-input>
                            <el-button type="primary" size="small" icon="Refresh" @click="cateStore.refreshCateList">刷新 </el-button>
                            <el-button type="success" size="small" icon="CirclePlus" @click="onAddCate">添加 </el-button>
                        </div>
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" class="w-full" @click="onAddBookmark"> 添 加 </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<style scoped></style>
